<!-- 张让滔乱 -->
<template>
  <div class="content">
    <h3>基本牌</h3>
    <div class="base">
      <div
        class="card"
        :class="usedBaseCards.includes(index) ? 'recorded' : ''"
        v-for="(item, index) in baseCards"
        :key="index"
        @click="recordBaseCard(index)"
      >
        {{ item }}
      </div>
    </div>
    <h3>锦囊牌</h3>
    <div class="other">
      <div
        class="card"
        :class="usedOtherCards.includes(index) ? 'recorded' : ''"
        v-for="(item, index) in otherCards"
        :key="index"
        @click="recordOtherCard(index)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const usedBaseCards = ref<number[]>([]);
const usedOtherCards = ref<number[]>([]);

const baseCards = ref<string[]>(["杀", "火杀", "雷杀", "闪", "酒", "桃"]);
const otherCards = ref<string[]>([
  "顺手牵羊",
  "过河拆桥",
  "决斗",
  "火攻",
  "铁索连环",
  "借刀杀人",
  "万箭齐发",
  "南蛮入侵",
  "无懈可击",
  "无中生有",
  "五谷丰登",
  "桃园结义",
]);

const recordBaseCard = (index: number): void => {
  let key = usedBaseCards.value.indexOf(index);
  console.log(key);

  if (key > -1) {
    usedBaseCards.value.splice(key, 1);
  } else {
    usedBaseCards.value.push(index);
  }
};

const recordOtherCard = (index: number): void => {
  let key = usedOtherCards.value.indexOf(index);
  console.log(key);

  if (key > -1) {
    usedOtherCards.value.splice(key, 1);
  } else {
    usedOtherCards.value.push(index);
  }
};
</script>

<style scoped lang="scss">
.content {
  h3 {
    width: 100%;
    text-align: center;
    margin: 0;
  }
  .base,
  .other {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 20rem;
  }
  .card {
    padding: 10rem 20rem;
    margin: 10rem;
    border: 2px solid #bf9d5e;
    border-radius: 10rem;
    font-size: 34rem;
  }
  .recorded {
    background-color: #bf9d5e;
    color: #fff;
  }
}
</style>
